<template>
    <div class="list">
        <BoxItem :articleList="articleList" :articleType="articleType" @handleEdit="handleEdit"></BoxItem>
        
        <PromptBox :visible="visible" @onCancel="() => this.visible = false" @onOk="handleDelete"
                   title="确定要删除吗?"></PromptBox>
    </div>
</template>

<script>
    import BoxItem from './BoxItem'
    import PromptBox from '@views/PromptBox'
    
    export default {
        name: "ArticleBox",
        components: {
            BoxItem, PromptBox
        },
        data() {
            return {
                pageNum: 1,
                articleList: [],
                isLoading: false,
                visible: false,
                deleteItem: {},
                deleteIndex: '',
                articleType: 3
            }
        },
        created() {
            this.initData(this.pageNum)
            let self = this
            window.onscroll = function () {
                //滚动距离
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                //可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
                //滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
                //滚动条到底部的条件
                if (scrollTop + windowHeight > scrollHeight - 100 && !self.isLoading && self.haveNextPage === 'yes') {
                    //写后台加载数据的函数
                    self.isLoading = true
                    let num = self.pageNum + 1
                    self.getData(num)
                }
            }
        },
        methods: {
            initData(num) {
                this.$axios({
                    actionName: 'bbs.article.draft.list',
                    pageNum: num,
                    pageSize: 16
                }).then(res => {
                    let data = res.data
                    this.articleList = data.list
                    this.haveNextPage = data.haveNextPage
                    this.total = data.total
                    this.isLoading = false
                })
            },
            getData(num) {
                this.$axios({
                    actionName: 'bbs.article.draft.list',
                    pageNum: num,
                    pageSize: 16,
                }).then(res => {
                    let data = res.data
                    this.articleList = this.articleList.concat(data.list)
                    this.haveNextPage = data.haveNextPage
                    this.isLoading = false
                    this.pageNum = num
                })
            },
            showPrompt(item, index) {
                this.visible = true
                this.deleteItem = item
                this.deleteIndex = index
            },
            handleDelete() {
                let list = JSON.stringify([this.deleteItem.articleDraftId])
                this.$axios({
                    actionName: 'bbs.article.draft.delete',
                    draftList: list
                }).then(res => {
                    this.articleList.splice(this.deleteIndex, 1)
                    this.$parent.handleDelete()
                    this.visible = false
                })
            },
            handleEdit(item) {
                let url = ''
                if (item.articleType == 4) {
                    url = '/editVideoPage.html?articleType=' + item.articleType + '&articleDraftId=' + item.articleDraftId + '&from=draft'
                } else {
                    url = '/editPage.html?articleType=' + item.articleType + '&articleDraftId=' + item.articleDraftId + '&from=draft'
                }
                window.location.href = url
            }
        }
    }
</script>

<style scoped lang="less">

</style>
